//引入 用来发送请求 的方法， 一定要把路径补全
import { request } from "../../request/index.js";
// 下列代码请求出错
// import regeneratorRuntime from '../../lib/runtime/runtime';
Page({
  data: {
    //左侧的菜单数据
    leftMenuList: [],
    //右侧的商品数据
    rightContent: [],
    //被点击的左侧菜单
    currentIndex: 0,
    //右侧内容的滚动条距顶部的距离
    scrollTop: 0
  },
  //接口返回的数据
  Cates: [],

  onLoad: function (options) {
    /** 
    0 web中的本地存储和 小程序中的本地存储的区别
      1 写代码的方式不一样了 
        web: localStorage.setItem("key","value") localStorage.getItem("key")
    小程序中: wx.setStorageSync("key", "value"); wx.getStorageSync("key");
      2:存的时候 有没有做类型转换
        web: 不管存入的是什么类型的数据，最终都会先调用以下 toString(),把数据变成了字符串 再存入进去
      小程序: 不存在 类型转换的这个操作 存什么类似的数据进去，获取的时候就是什么类型
    1 先判断一下本地存储中有没有旧的数据
      {time:Date.now(),data:[...]}
    2 没有旧数据 直接发送新请求 
    3 有旧的数据 同时 旧的数据也没有过期 就使用 本地存储中的旧数据即可
     */

    //1. 获取本地存储中的数据（小程序中也是存在本地存储中）
    //cates哪来的？？？
    const Cates = wx.getStorageSync("cates");
    //2. 判断
    if (!Cates) { //不存在数据
      this.getCates();
    } else { //有旧的数据
      //定义过期时间 10s 改为 5 分钟
      if (Date.now() - Cates.time > 1000 * 10) {
        //重新发送请求
        this.getCates()
      } else {
        //可以使用旧的数据
        this.Cates = Cates.data;
        let leftMenuList = this.Cates.map(v => v.cat_name);
        let rightContent = this.Cates[0].children;
        this.setData({
          leftMenuList,
          rightContent
        })
      }
    }
  },
  //获取分类的数据
  async getCates() {
    request({
      url: "/categories"
    })
      .then(res => {
        this.Cates = res;

        //把接口的数据存到本地存储中
        wx.setStorageSync("cates", { time: Date.now(), data: this.Cates });

        //构造左侧菜单数据
        let leftMenuList = this.Cates.map(v => v.cat_name);
        //构造右侧商品数据
        let rightContent = this.Cates[0].children;
        this.setData({
          leftMenuList,
          rightContent
        })
      })

    // //1. 使用es7的async await来发送请求
    // const res = await request({ url: "/categories" })
    // this.Cates = res;
    // //把接口的数据存到本地存储中
    // wx.setStorageSync("cates", { time: Date.now(), data: this.Cates });

    // //构造左侧菜单数据
    // let leftMenuList = this.Cates.map(v => v.cat_name);
    // //构造右侧商品数据
    // let rightContent = this.Cates[0].children;
    // this.setData({
    //   leftMenuList,
    //   rightContent
    // })
  },
  //获取左侧菜单的点击事件
  handleItemTap(e) {
    /*
    1. 获取被点击的标题身上的索引
    2. 给data中的currentIndex赋值即可
    3. 根据不同的索引来渲染右侧的商品内容
    */
    let { index } = e.currentTarget.dataset
    let rightContent = this.Cates[index].children;
    this.setData({
      currentIndex: index,
      rightContent,
      //重新设置 右侧内容的scroll-view标签距顶部的距离
      scrollTop: 0
    })

  }
})